@import "./../../assets/scss/index.scss";

.exit-dialog{
    // position: absolute;top:0;left:0;right: 0;bottom: 0;background: black;
}
.exit-dialog-container{
    width: pxTorem(400px);
    header{text-indent: 1em;color: white; background-color: #444;font-size: pxTorem(20px);height: pxTorem(48px);line-height: pxTorem(48px); }
    .content-container{width: pxTorem(360px);margin: 0 auto;}
    md-radio-group{
        font-size: pxTorem(18px);
        div.option{
            padding: 8px 20px;
            .select{padding: 8px 0;margin-left: 28px;}
        }
    }
    .buttons{
        button{font-size: pxTorem(20px); width: 50%;box-sizing: border-box;float: left;}
        button:first-child{background: #e6e6e6;color: #333333; height: pxTorem(48px);}
        button:last-child{background: $mpj-primary;color: white; height: pxTorem(48px);} 
    }
}



.kitchen-solutions{
    color: #333333;
    header{
        border-bottom:  1px solid #999999;padding-left:16px;padding-right:16px;
        p{padding: 16px 0px;}
        .icon-clear{position: absolute;top:16px;right:16px;font-size:pxTorem(30px);color: #333333;}
        .title{font-size: 20px;}
    }
    section{
        padding-left:16px;padding-right:16px; border-bottom:  1px solid #999999;padding-bottom:16px;
        p.title{margin: 16px 0;padding: 8px 0;color: #6d6d6d;font-size: 18px;}
        p.content{color: #6d6d6d;font-size: 18px;padding: 8px 0;margin:0;}
        p{
            font-size: 20px;color: #333333;margin:  8px 0;
            .name{padding: 8px 0;font-size: 20px;}
            .btns{
                border-radius: 5px;border:1px solid #999999;font-size: 0;height:40px;
                button{height: 100%;width: 56px;border-right:1px solid #999999;font-size: 18px;}
                button:last-child{border-right:1px solid transparent;}
                button.active{background: $mpj-primary;color: white;pointer-events: none;}
            }
        }
    }
    footer{
        padding-left:16px;padding-right:16px;
        button{height: 56px;width: 100%;font-size: 22px;color: $mpj-primary; line-height: 0;}
    }
}


.page_btn_component{
    display: flex;
    color: #333;
    background: #fff;
    .btn{
        flex: 1;
        cursor: pointer;
        position: relative;
        text-align: center;
        height: pxTorem(60px);
        line-height: pxTorem(60px);
        border-left: 1px solid #d6d2d2;
        &:first-child{
            border-left: 0;
        }
        .material-icons,.tipNum{
            top:50%;
            left: 50%;
            position: absolute;
        }
        .tipNum{
            font-size: pxTorem(16px);
            height: 0;
            line-height: 0;
            display: block;
            position: absolute;
            background: #ff8800;            
            margin-top: - pxTorem(15px);            
            margin-left: - pxTorem(55px);
            padding: pxTorem(14px) pxTorem(9px);
            border-radius: pxTorem(14px);
        }
        .material-icons{
            display: block;
            font-size: pxTorem(30px);
            margin-top: - pxTorem(15px);            
            margin-left: - pxTorem(15px);
        }
    }
}